<script setup>
import {onMounted, ref} from "vue";
import CommentSubmit from "@/components/post/CommentSubmit.vue";

const props = defineProps({
  comment: {
    type: Object,
    default: () => {
      return {}
    },
  },
  width: {
    type: [Number, String],
    default: 40,
  },
});

const emits = defineEmits(['refresh']);

const commentData = ref(props.comment);
const avatarWidth = ref(props.width + 'px');
const isShowReply = ref(false);
const replyBtnText = ref('回复');
const avatarRandomBg = ref('#409EFF');
const reply = () => {
  console.log('reply');
  isShowReply.value = !isShowReply.value;
  replyBtnText.value = isShowReply.value ? '取消' : '回复';
};

onMounted(() => {
  // 重置变量
  commentData.value = props.comment;
  avatarWidth.value = props.width + 'px';
  isShowReply.value = false;
  replyBtnText.value = '回复';
  // 随机生成背景颜色
  avatarRandomBg.value = getRandomColor();
});


const getRandomColor = () => {
  let r, g, b;
  let brightness;
  // 确保亮度在合适范围（125 到 200 之间）
  do {
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);
    brightness = (r * 299 + g * 587 + b * 114) / 1000; // 感知亮度公式
  } while (brightness < 100 || brightness > 220); // 控制亮度范围
  
  return `rgb(${r}, ${g}, ${b})`;
};

const submit = () => {
  console.log('子评论-->submit');
  emits('refresh');
};
</script>

<template>
  <div class="v-comment-item">
    <div>
      <div class="v-comment-header">
        <div>{{ commentData?.commentator?.substring(0, 1) }}</div>
        <div class="v-header-title">
          <span>
            {{ commentData?.commentator }}
            <template v-if="commentData?.isReply">
              <span style="color: #409EFF;font-size: 14px;">回复</span>
              {{ '@' + commentData?.replyCommentator }}
            </template>
          </span>
          <span>{{ commentData?.createdTime }}</span>
        </div>
        <div class="v-comment-reply">
          <span @click="reply">{{ replyBtnText }}</span>
        </div>
      </div>
      <div class="v-comment-content">{{ commentData.content }}</div>
    </div>
    
    <comment-submit v-model="isShowReply" :parent-id="commentData?.id" @refresh="submit" :key="commentData"/>
    
    <div v-if="commentData?.children?.length > 0">
      <comment-item v-for="item in commentData.children" @refresh="submit" :comment="item" width="32" :key="item"/>
    </div>
  </div>
</template>

<style scoped>
.v-comment-item {
  background-color: #ffffff;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  border-radius: 8px;
  border-left: 6px solid #77b5f5;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  
  .v-comment-header {
    display: flex;
    align-items: center;
    
    > div:nth-child(1) {
      width: v-bind(avatarWidth);
      height: v-bind(avatarWidth);
      background-color: v-bind(avatarRandomBg);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 20px;
    }
    
    .v-header-title {
      flex: 1;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      
      > span:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
      }
      
      > span:nth-child(2) {
        font-size: 12px;
      }
    }
    
    .v-comment-reply {
      font-size: 12px;
      color: #409EFF;
      padding: 4px 7px;
    }
    
    .v-comment-reply:hover {
      cursor: pointer;
      background-color: rgba(64, 158, 255, 0.1);
      border-radius: 4px;
    }
  }
  
  .v-comment-content {
    box-sizing: border-box;
    padding-left: 20px;
    margin-top: 10px;
    //color: #cccccc;
    font-size: 12px;
  }
}

.v-comment-item:hover {
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
}
</style>